<template>
  <div class="pbody">
    <div>
      <!-- <div class="cardbox">
        <div class="flexrowbetween bor_b">
          <div class="c_000">
            {{ row.draw.level_name }}：{{ row.draw.draw_name }}
          </div>
          <div v-if="row.is_cash==1">
            <div v-if="!row.more">
              <el-tag type="info" class="tag_info">未核销</el-tag>
            </div>
            <div v-else>
              <el-tag type="info" class="tag_info" v-if="row.status == 0">未核销</el-tag>
              <el-tag type="success" class="tag_success" v-else>已核销</el-tag>
            </div>
          </div>
        </div>
        <div class="flex mb_15 mt_15">
          <div class="title flex aligncenter c_000 f-13">获奖人</div>
          <div class="content flex aligncenter f-13 c_000">
            <img
              v-if="row.wxuser.photo"
              :src="row.wxuser.photo"
              alt=""
              class="avatar mr_15"
            />
            {{ row.wxuser.name }}
          </div>
        </div>
        <div class="flex mb_15">
          <div class="title c_000 f-13">活动</div>
          <div class="content c_000 f-13">
            {{ row.task ? row.task.name : "-" }}
          </div>
        </div>
        <div class="flex mb_15">
          <div class="title c_000 f-13">券号</div>
          <div class="content c_000 f-13">{{ row.code || "-" }}</div>
        </div>
        <div class="flex mb_15 bor_b">
          <div class="title c_000 f-13">兑奖期限</div>
          <div class="content c_000 f-13">
            <span v-if="row.draw"
              >{{ row.draw.startime }}-{{ row.draw.endtime }}</span
            >
            <span v-else>-</span>
          </div>
        </div>
        <div class="title c_000 f-13 mb_15">核销备注</div>
        <el-input
          v-model="remark"
          size="mini"
          placeholder="最多输入40个汉字或40个英文字母"
        ></el-input>
        <div class="bor_b"></div> -->
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="100px"
          class="mt_15 labelsty"
        >
          <!-- <el-form-item label="地址信息：" prop="address">
            <el-cascader v-if="!status"
              v-model="form.address"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
            <span v-if="status">湖南省长沙市</span>
          </el-form-item> -->
          <div class="flex">
            <el-form-item label="地址信息：" prop="province">
              <el-select
                v-model="form.province"
                placeholder="省份"
                clearable
                filterable
                @change="onselectCitys($event, 1)"
                style="width: 90px; margin-right: 6px"
              >
                <el-option
                  v-for="(item, index) in province"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="city" label-width="0">
              <el-select
                v-model="form.city"
                placeholder="市"
                clearable
                filterable
                @change="onselectCitys($event, 2)"
                style="width: 90px; margin-right: 6px"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="area" label-width="0">
              <el-select
                v-model="form.area"
                placeholder="区（县）"
                clearable
                filterable
                @change="onselectCitys($event, 3)"
                style="width: 90px"
              >
                <el-option
                  v-for="(item, index) in region"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <Citys ref="citys" :info='citysParams' /> -->
          </div>
          <el-form-item label="详细地址：" prop="address">
            <el-input
              v-model="form.address"
              type="textarea"
              rows="3"
              placeholder="请输入相似地址信息，如道路、门牌号、小区、楼栋号、单元等信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮政编码：" prop="post_code">
            <el-input
              v-model="form.post_code"
              placeholder="请填写邮编"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名：" prop="name">
            <el-input
              v-model="form.name"
              placeholder="长度不超过25字符"
              maxlength="25"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="电话号码、手机号码必须填一项"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="beizhu">
            <el-input
              v-model="form.beizhu"
              placeholder="请填写备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="flexcenter mt_20" v-if="type==1">
        <el-button
          type="danger"
          v-if="!row.more || row.status == 0"
          class="mlr_40"
          @click="submitHx"
        >立即核销</el-button>
        <el-button
          type="danger"
          v-else
          class="mlr_40"
          @click="submitHx"
          >撤回核销</el-button
        >
      </div>
      <div class="flexcenter mt_20" v-else>
        <el-button
          type="primary"
          class="mlr_40"
          @click="submitHx"
        >确定</el-button>
      </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { destroyCode,setAddress,revocationCode } from "@/api/hexiao";
import { validPhone } from "@/utils/validate";
import { getCitys, getRegions } from "@/api/comm";

export default {
  data() {
    return {
      form: {
        task_id:'',
        id: "",
        province: "",
        city: "",
        area: "",
        address: "",
        name: "",
        phone: "",
        beizhu: "",
        post_code: "",
      },
      rules: {
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        area: [{ required: true, message: "地区不能为空", trigger: "blur" }],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          {
            min: 5,
            max: 120,
            message: "长度在 5 到 120 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "收货人姓名不能为空", trigger: "blur" },
        ],
        phone: [{ required: true, validator: validPhone, trigger: "blur" }],
      },
      province:[],
      citys:[],
      region:[],
    };
  },

  props: {
    row: {
      default: {},
    },
    type:{
      default:1
    }
  },

  computed: {},

  created() {
    console.log('row:', this.row)
    this.form.id = this.row.id
    this.form.task_id = this.row.task_id
    if(this.row.more){
      this.form.address = this.row.more.address
      this.form.province = this.row.more.province
      this.form.city = this.row.more.city
      this.form.area = this.row.more.area 
      this.form.name = this.row.more.name 
      this.form.phone = this.row.more.phone
      this.form.post_code = this.row.more.post_code
      // this.remark = this.row.more.area
    }
    this.getProvince(1);
  },

  methods: {

    getProvince(type, params, info = "") {
      if (type == 1) {
        //省份
        this.getDicts("/user/user/province").then((res) => {
          this.province = res.data;
          // 回显
          if (this.form.province) {
            let indexId = -1;
            this.province.forEach((item) => {
              if (this.form.province == item.name) {
                indexId = item.id;
              }
            });
            console.log("indexId:", indexId);
            if (indexId >= 0) {
              this.getProvince(2, { province_index: indexId }, 99);
            }
          }
        });
      }
      if (type == 2) {
        //城市
        getCitys(params).then((res) => {
          this.citys = res.data;
          // 回显
          if (info && this.form.province && this.form.city) {
            let pindex = -1;
            this.province.forEach((item) => {
              if (this.form.province == item.name) {
                pindex = item.id;
              }
            });
            let cindex = -1;
            this.citys.forEach((item) => {
              if (this.form.city == item.name) {
                cindex = item.id;
              }
            });
            this.getProvince(3, { province_index: pindex, city_index: cindex });
          }
        });
      }
      if (type == 3) {
        //地区
        getRegions(params).then((res) => {
          this.region = res.data;
          if (this.isSearch) {
            if (this.regionSearch.aid) {
              this.region.forEach((item) => {
                if (this.regionSearch.aid == item.id) {
                  this.form.area = item.name;
                }
              });
            }
            this.isSearch = false;
            this.regionSearch = {};
          }
        });
      }
    },

    // 城市选择
    async onselectCitys(event, type) {
      // console.log('change');
      if (type == 1 && this.form.province) {
        // let index = this.province.indexOf(this.form.province);
        let index = -1;
        this.province.forEach((item) => {
          if (this.form.province == item.name) {
            index = item.id;
          }
        });
        if (index >= 0) {
          this.getProvince(2, { province_index: index });
        }
        this.form.city = "";
        this.form.area = "";
      }
      if (type == 2 && this.form.city) {
        this.form.area = "";
        let pindex = -1,
          cindex = -1;
        this.province.forEach((item) => {
          if (this.form.province == item.name) {
            pindex = item.id;
          }
        });
        console.log("this.citys:", this.citys, this.form.city);
        let name = "";
        if (this.form.city.includes("_")) {
          name = this.form.city.split("_")[0];
        } else {
          name = this.form.city;
        }
        console.log("name:", name);
        this.citys.forEach((item) => {
          if (name == item.name) {
            cindex = item.id;
          }
        });
        // let pindex = this.province.indexOf(this.form.province);
        // let cindex = this.citys.indexOf(this.form.city);
        this.getProvince(3, { province_index: pindex, city_index: cindex });
      }
    },

    submitHx() {
      // if(this.type == 1){
        this.$refs.form.validate((valid) => {
          if (!valid) return;
          console.log(this.form)
          setAddress(this.form).then(res=>{
            this.$message.success('操作成功')
            this.$emit("close",1);
            // destroyCode({id:this.row.id}).then(res=>{
            //   this.$message.success('核销成功')
            //   this.$emit("close",1);
            // })
          })
        });
      // }else{
      //   this.$refs.form.validate((valid) => {
      //     if (!valid) return;
      //     console.log(this.form)
      //     setAddress(this.form).then(res=>{
      //       this.$message.success('操作成功')
      //       this.$emit("close",1);
      //       // destroyCode({id:this.row.id}).then(res=>{
      //       //   this.$message.success('核销成功')
      //       //   this.$emit("close",1);
      //       // })
      //     })
      //   });
      // }
      
      // this.status = 1
    },


    onClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.pbody {
  padding: 0 20px;
}
.oneimg {
  width: 320px;
}
.cardbox {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 15px;
}
.bor_b {
  padding-bottom: 10px;
  border-bottom: 1px dotted #eee;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.title {
  width: 120px;
}
.content {
  width: calc(100% - 120px);
}
.labelsty {
  ::v-deep .el-form-item__label {
    font-size: 13px;
    font-weight: normal;
    color: #000;
  }
}
</style>